<template>
  <div class="wrap">
    <el-button type="primary" @click="goToReturn">返回</el-button>
    <div class="item">
      <div class="desc">轴体名称:</div>
      <div class="input-name">
        <el-input v-model="name" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="item">
      <div class="desc">轴体简单名称:</div>
      <div class="input-simple-name">
        <el-input v-model="simpleName" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="item">
      <div class="desc">作者:</div>
      <div class="input-author">
        <el-select v-model="authorId" clearable placeholder="请选择">
          <el-option
            v-for="item in authorOption.list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="item">
      <div class="desc">代工厂:</div>
      <div class="input-manufacturer">
        <el-select v-model="manufacturerId" clearable placeholder="请选择">
          <el-option
            v-for="item in manufacturerOption.list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="item">
      <div class="desc">轴体类型:</div>
      <div class="input-switch-type">
        <el-select v-model="switchTypeId" clearable placeholder="请选择">
          <el-option
            v-for="item in switchTypeOption.list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="item">
      <div class="desc">轴体颜色:</div>
      <div class="input-background-color">
        <el-color-picker v-model="fullBackgroundColor"></el-color-picker>
      </div>
    </div>
    <div class="item">
      <div class="desc">字体颜色:</div>
      <div class="input-color">
        <el-color-picker v-model="fullColor"></el-color-picker>
      </div>
    </div>
    <el-button type="success" @click="submit">提交</el-button>
  </div>
</template>
<script>
import { Button, Input, Select, Option, ColorPicker } from "element-ui";
import { getSwitchDetail, editSwitch } from "@/api/keyswitch.js";
import { getAuthorList } from "@/api/author.js";
import { getManufacturerList } from "@/api/manufacturer.js";
import { getSwitchTypeList } from "@/api/switch-type.js";
export default {
  name: "edit-switch",
  components: {
    [Button.name]: Button,
    [Input.name]: Input,
    [Select.name]: Select,
    [Option.name]: Option,
    [ColorPicker.name]: ColorPicker
  },
  data() {
    return {
      id: null,
      name: null,
      simpleName: null,
      authorId: null,
      authorName: null,
      manufacturerId: null,
      manufacturerName: null,
      switchTypeId: null,
      switchTypeName: null,
      backgroundColor: null,
      color: null,
      img: null,
      authorOption: {
        list: [
          {
            label: "未选择",
            value: -1
          }
        ]
      },
      manufacturerOption: {
        list: [
          {
            label: "未选择",
            value: -1
          }
        ]
      },
      switchTypeOption: {
        list: [
          {
            label: "未选择",
            value: -1
          }
        ]
      }
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    getSwitchDetail(this.id)
      .then(res => {
        this.name = res.name;
        this.simpleName = res.simpleName;
        this.authorId = res.authorId;
        this.authorName = res.authorName;
        this.manufacturerId = res.manufacturerId;
        this.manufacturerName = res.manufacturerName;
        this.switchTypeId = res.switchTypeId;
        this.switchTypeName = res.switchTypeName;
        this.backgroundColor = res.backgroundColor;
        this.color = res.color;
        this.img = res.img;
      })
      .catch(errMsg => this.$alert(errMsg.msg));
    getAuthorList({})
      .then(res => {
        res.forEach(item => {
          this.authorOption.list.push({
            label: item.name,
            value: item.id
          });
        });
      })
      .catch(errMsg => this.$alert(errMsg.msg));
    getManufacturerList({})
      .then(res => {
        res.forEach(item => {
          let fullname = item.name;
          if (item.englishName != null) {
            fullname = `${item.englishName}-${item.name}`;
          }
          this.manufacturerOption.list.push({
            label: fullname,
            value: item.id
          });
        });
      })
      .catch(errMsg => this.$alert(errMsg.msg));
    getSwitchTypeList({})
      .then(res => {
        res.forEach(item => {
          this.switchTypeOption.list.push({
            label: item.name,
            value: item.id
          });
        })
      })
      .catch(errMsg => this.$alert(errMsg.msg));
  },
  methods: {
    goToReturn() {
      this.$router.push(`/backend/switch`);
    },
    submit() {
      editSwitch({
        id: this.id,
        name: this.name,
        simpleName: this.simpleName,
        authorId: this.authorId,
        manufacturerId: this.manufacturerId,
        switchTypeId: this.switchTypeId,
        backgroundColor: this.backgroundColor,
        color: this.color
      })
        .then(res => {
          this.goToReturn();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  },
  computed: {
    fullBackgroundColor: {
      get: function() {
        if (this.backgroundColor == null || this.backgroundColor == "") {
          return "#ffffff";
        }
        return `#${this.backgroundColor}`;
      },
      set: function(newValue) {
        if (newValue == null || newValue == "") {
          this.backgroundColor = "ffffff";
          return;
        }
        this.backgroundColor = newValue.substring(1, 7);
      }
    },
    fullColor: {
      get: function() {
        if (this.color == null || this.color == "") {
          return "#000000";
        }
        return `#${this.color}`;
      },
      set: function(newValue) {
        if (newValue == null || newValue == "") {
          this.color = "ffffff";
          return;
        }
        this.color = newValue.substring(1, 7);
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  .item {
    padding-top: 20px;
    padding-left: 10px;
    padding-bottom: 5px;

    .desc {
      position: absolute;
      width: 120px;
      line-height: 40px;
    }

    .input-name {
      width: 500px;
      margin-left: 120px;
    }

    .input-simple-name {
      width: 500px;
      margin-left: 120px;
    }

    .input-author {
      width: 500px;
      margin-left: 120px;
    }

    .input-manufacturer {
      width: 500px;
      margin-left: 120px;
    }

    .input-switch-type {
      width: 500px;
      margin-left: 120px;
    }

    .input-background-color {
      width: 500px;
      margin-left: 120px;
    }

    .input-color {
      width: 500px;
      margin-left: 120px;
    }
  }
}
</style>